<template>
  <ex-dialog width="45%" class="ex-diolog" title="卡详情" :visible="visible" @closeDialog="handleClose">

    <div class="main">
      <loading v-if="loading" />
      <div class="info-box" v-else>
        <div class="info-item">
          <div class="info-head">
            <div class="head-line"></div>
            <p>卡基本信息</p>
          </div>
          <div class="info-body">
            <div class="list list-01">
              <div class="lable">链上卡编号：</div>
              <div class="lable-content">{{data.customerCardId}}</div>
            </div>
            <div class="list ">
              <div class="lable">卡类型：</div>
              <div class="lable-content">{{data.cardTypeDict}}</div>
            </div>
            <div class="list list-03">
              <div class="lable">卡名称：</div>
              <div class="lable-content">{{data.name}}</div>
            </div>
            <div class="list ">
              <div class="lable">卡有效期：</div>
              <div class="lable-content" v-if="data.validityType == 19">{{data.usableCount}}天</div>
              <div class="lable-content" v-else>{{data.validityTypeDict}}</div>

            </div>
            <div class="list ">
              <div class="lable">卡面值：</div>
              <div class="lable-content">{{data.worth}}元</div>
            </div>
            <div class="list ">
              <div class="lable">购卡金额：</div>
              <div class="lable-content">{{data.buyMoney}}元</div>
            </div>
            <div class="list ">
              <div class="lable">发行数量：</div>
              <div class="lable-content">{{data.issueTotal}}张</div>
            </div>
            <div class="list ">
              <div class="lable">当前余额：</div>
              <div class="lable-content">{{data.balanceMoney}}</div>
            </div>
          </div>
        </div>

        <!-- 股东卡 -->
        <div class="info-item info-item-01 info-item-05" v-if="data.cardType == 1 && data.shareholderCard != '' ">
          <div class="info-head">
            <div class="head-line"></div>
            <p>权益信息</p>
          </div>
          <div class="info-body">
            <div class="list list-weight">
              <div class="lable">基础权益</div>
              <div class="lable-content"></div>
            </div>
            <div v-for="(item,index) in data.shareholderCard.basePowers" :key="index">
              <div class="list" v-if="item.type == 1 ">
                <div class="lable">每次消费打折：</div>
                <div class="lable-content">{{item.value}}折</div>
              </div>
              <div class="list" v-else>
                <div class="lable">购卡赠送金额：</div>
                <div class="lable-content">{{item.value}}元</div>
              </div>
            </div>
            <div class="list list-weight">
              <div class="lable">附加权益</div>
              <div class="lable-content"></div>
            </div>
            <div v-for="(item,index1) in data.shareholderCard.addPowers" :key="index1">
              <template v-if="item.type == 1">
                <div class="list">
                  <div class="lable">享受营业分红：</div>
                  <div class="lable-content"></div>
                </div>
                <div class="list ">
                  <div class="lable" style="width: auto;">按本店日营收，享受{{item.value?item.value:0}}%分红，
                    分红达到{{item.data?item.data:0}}元，不再获得分红</div>
                </div>
              </template>
              <template v-else>
                <div class="list">
                  <div class="lable">拉新获得分佣：</div>
                  <div class="lable-content"></div>
                </div>
                <div class="list ">
                  <div class="lable" style="width: auto;">
                    请新客户购卡，享受其实付金额{{item.value?item.value:0}}%的佣金（即享受￥{{item.data?item.data:0}}的佣金)</div>
                </div>
              </template>
            </div>
          </div>
        </div>

        <!-- 计次卡 -->
        <div class="info-item info-item-02" v-if="data.cardType == 2 && data.numberCardList.length != 0">
          <div class="info-head">
            <div class="head-line"></div>
            <p>权益信息</p>
          </div>
          <div class="info-body">
            <div class="list list-weight">
              <div class="lable">可使用项目</div>
              <div class="lable-content"></div>
            </div>

            <div v-for="(item,index2) in data.numberCardList" :key="index2">
              <div class="list ">
                <div class="lable">项目{{index2+1}}：</div>
                <div class="lable-content">{{item.projectName}}</div>
              </div>
              <div class="list">
                <div class="lable">可使用次数：</div>
                <div class="lable-content">{{item.projectNumber}}次</div>
              </div>
              <div class="list ">
                <div class="lable">项目价值：</div>
                <div class="lable-content">{{item.projectWorth}}</div>
              </div>
              <div class="list ">
                <div class="lable">剩余次数：</div>
                <div class="lable-content">{{item.projectNumberUsable}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 计费卡 -->
        <div class="info-item info-item-01" v-if="data.cardType == 3 && data.chargeCardList.length != 0">
          <div class="info-head">
            <div class="head-line"></div>
            <p>权益信息</p>
          </div>
          <div class="info-body">

            <div class="list list-weight">
              <div class="lable">每次消费打折</div>
              <div class="lable-content"></div>
            </div>
            <div v-for="(item,index3) in data.chargeCardList2.powerType1" :key="index3">
              <div class="list ">
                <div class="lable">{{item.powerName}}：</div>
                <div class="lable-content">{{item.powerDescribe}}</div>
              </div>
            </div>

            <div class="list list-weight">
              <div class="lable">每次消费打折</div>
              <div class="lable-content"></div>
            </div>

            <div v-for="(item,index4) in data.chargeCardList2.powerType2" :key="index4">

              <template v-if="item.powerName == '赠送金额' ">
                <div class="list">
                  <div class="lable">赠送金额：</div>
                  <div class="lable-content">{{item.powerDescribe}}</div>
                </div>
                <div class="list ">
                  <div class="lable">赠送物品：</div>
                  <div class="lable-content"></div>
                </div>
              </template>
              <div class="list " v-else>
                <div class="lable">{{item.powerName}}：</div>
                <div class="lable-content">{{item.powerDescribe}}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 课时卡 -->
        <div class="info-item info-item-02" v-if="data.cardType == 4 && data.classCard != '' ">
          <div class="info-head">
            <div class="head-line"></div>
            <p>权益信息</p>
          </div>
          <div class="info-body">

            <div class="list ">
              <div class="lable">卡课时数：</div>
              <div class="lable-content">{{data.classCard.classNumber}}课时</div>
            </div>
            <div class="list">
              <div class="lable" style="width: 120px;">剩余卡课时数：</div>
              <div class="lable-content">{{data.classCard.classNumberUsable}}课时</div>
            </div>
          </div>
        </div>
        <div class="info-item info-item-03">
          <div class="info-head">
            <div class="head-line"></div>
            <p>卡说明介绍</p>
          </div>
          <div class="info-body">
            <el-input type="textarea" :autosize="{ minRows: 6}" placeholder="商家未填写说明介绍...."
              v-model="data.assetIntroduce" :readonly="true" resize="none" />
          </div>
        </div>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
  // components
  import {
    getCustomerCardId
  } from "@/api/insuranceUnderwriting";
  import Loading from "@/components/Loading/index";
  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        loading: false,
        data: {}
      };
    },

    created() {
      this.getDetail();
    },
    methods: {
      getDetail() {
        this.loading = true;
        getCustomerCardId(this.id)
          .then((res) => {
            console.log("获取详情", res);
            const {
              result
            } = res;
            // result.statusText = this.$getStatusText('quality_cert_verify_status', result.status)

            if (result.chargeCardList) {
              var chargeCardList2 = {
                powerType1: [],
                powerType2: []
              };
              result.chargeCardList.forEach(element => {
                if (element.powerType == 1) {
                  chargeCardList2.powerType1.push(element)
                }
                if (element.powerType == 2) {
                  chargeCardList2.powerType2.push(element)
                }
              });
              result.chargeCardList2 = chargeCardList2
            }

            this.data = result;
            console.log("转换数据", this.data);
          })
          .finally(() => {
            this.loading = false;
          });
      },
      handleClose() {
        this.$emit("update:visible", false);
      },


    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    .main {
      margin: 0 auto;

      .info-box {
        .info-item {
          padding: 20px;
          width: 100%;
          box-sizing: border-box;
          // box-shadow:5px 5px 10px 10px #ebebeb;
          border: 2px solid #ebebeb;
          border-radius: 5px;
          margin-bottom: 20px;

          .info-head {
            font-size: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9eaee;
            display: flex;
            align-items: center;

            .head-line {
              width: 4px;
              height: 25px;
              background-color: #005dea;
              margin-right: 10px;
            }
          }

          .info-body {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .list {
              display: flex;
              align-items: center;
              font-size: 16px;
              margin-top: 30px;



              .lable {
                width: 115px;
                text-align: right;
              }

              .lable-content {
                min-width: 140px;
              }
            }

            .list-01 {
              margin-top: 20px;
              width: 100%;

              .lable-content {
                min-width: unset;
              }
            }

            .list-03 {
              .lable-content {
                min-width: 200px;
              }
            }
          }
        }

        .info-item-01 {
          .info-body {
            display: block;

            .list {
              margin-top: 15px;
            }

            .list-weight {
              margin-top: 30px;

              .lable {
                font-weight: 600;
              }
            }
          }
        }

        .info-item-02 {
          .info-body {
            .list {
              margin-top: 20px;

              .lable {
                width: 100px;
              }

              .lable-content {
                min-width: 80px;
              }
            }

            .list-weight {
              margin-top: 30px;
              width: 100%;

              .lable {
                font-weight: 600;
              }
            }
          }
        }

        .info-item-03 {
          .info-body {
            padding-top: 10px;

            ::v-deep .el-textarea__inner {
              font-size: 16px;
              border: unset;
              resize: none;
              /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
            }
          }
        }

        .info-item-05 {
          .info-body {
            .list {
              .lable {
                text-align: left;
                width: auto;
                margin-left: 30px;
              }
            }

            .list-weight {
              .lable {
                margin-left: unset;
              }

            }
          }
        }


      }
    }

  }

</style>
